function debounce(fn, delay) {
    let timer = null
    return function () {
        let that = this
        let args = arguments
        console.log(timer)
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn.apply(that, args)
            clearTimeout(timer)
            timer = null
        }, delay)
    }
}

function searchData(keyword) {
    $.ajax({
        type: 'post',
        contentType: "application/json; charset=utf-8",
        url: 'https://www.migame.vip/gamefront/gameList/search',
        dataType: "json",
        data: JSON.stringify({
            gameName: keyword,
            page: 1,
            limit: 30
        }),
        success: function (res) {
            $('#search-results').empty();
            res.data.forEach(function (item) {
                $('#search-results').append(`<li class="gameName"> <a href="${getUrl(gameChannelId, item)}&&keyword=${item.gameName}"><span>${item.gameName}</span></a> </li>`);
            });
        },
        error: function (error) {
            console.log(error, '#error');
        }
    })
}

function renderSearchDom(gameChannelId = 5870) {
    const camp = getQueryVariable('camp') ? `&camp=${this.getQueryVariable('camp')}` : '' 
    const groupId = getQueryVariable('groupId') ? `&groupId=${this.getQueryVariable('groupId')}` : ''

    let url = ''
    if (gameChannelId == 5972) {
        url = `search.html?gameChannelId=${gameChannelId}${camp}${groupId}`
    } else {
        url = `search.html?gameChannelId=${gameChannelId}`
    }

    const searchDom = `
    <div class="search">
        <div class="search-menu">
            <input class="search_input" type="text" id="search-input">
            <div class="search-btn">
                <img class="search-btn_img" src="./img/icon-search.png" alt="search_icon" width="20">
            </div>
            <div class="search-table" style="display: none">
                <ul id="search-results"></ul>
            </div>
        </div>
    </div>

    <a class="to-search" href="${url}">
      <img src="./img/search.png" alt="search_icon" width="35">
    </a>

    <script>
        $(document).ready(function () {
            const camp = getQueryVariable('camp') ? '&camp=' + getQueryVariable('camp') : '' 
            const groupId = getQueryVariable('groupId') ? '&groupId=' + getQueryVariable('groupId') : ''

            var timer;
            var keyword;
            var results
            const newSearchData = debounce(searchData, 500)
            // 监听搜索框输入事件
            $('#search-input').on('input', function () {
                clearTimeout(timer);
                // 获取搜索关键词
                keyword = $(this).val();

                if (keyword.length === 0) {
                    $('.search-table').hide()
                } else {
                    $('.search-table').show()
                }
                newSearchData(keyword)
            });

            $('.search-btn').click(function () {
                let url = ''
                if (gameChannelId == 5972) {
                    url = 'search.html?gameChannelId=' + gameChannelId + '&keyword=' + $('#search-input').val() + camp + groupId
                } else {
                    url = 'search.html?gameChannelId=' + gameChannelId + '&keyword=' + $('#search-input').val()
                }
                location.href = url
            })

            var placeHolder =  getQueryVariable('keyword') ? decodeURIComponent(getQueryVariable('keyword')) : 'Search Game...'

            $('.search_input').attr("placeholder", placeHolder)
        });

    </script>
`
    $('.header').append(searchDom)
}

function getUrl(gameChannelId, element) {
  const camp = this.getQueryVariable('camp') ? `&camp=${this.getQueryVariable('camp')}` : '' 
  const groupId = this.getQueryVariable('groupId') ? `&groupId=${this.getQueryVariable('groupId')}` : ''
  let url = ''
  if (gameChannelId == 5972) {
    url = `detail.html?gameChannelId=${gameChannelId}&gameId=${element.gameId}${camp}${groupId}`
  } else {
    url = `detail.html?gameChannelId=${gameChannelId}&gameId=${element.gameId}`
  }
  return url
}